<template>
  <view v-if="list && list.length" :class="['p-apprise', {'is-new-template' : isNewTemplate}, {'is-template-3' : isTemplate3}]">
    <template v-if="isNewTemplate">
      <view class="title" @click="handleAppriseList">
        <view>用户真实评价</view>
        <x-icon name="icon-017" color="#CC4900" :size="36" />
      </view>
      <PAppriseRollingTags v-if="newLabel && newLabel.length" :list="newLabel" />
    </template>
    <template v-else>
      <view v-if="isTemplate3" class="title" @click="handleAppriseList">
        <view>宝贝评价</view>
        <view class="good-rate">
          <view>{{ appriseRate }}</view>
          <x-icon name="icon-017" color="#EB441F" :size="28" />
        </view>
      </view>
      <x-cell
        v-else
        :last="label && label.length"
        title="用户评价"
        suffix-icon="icon-017"
        suffix-icon-color="#EB441F"
        strong
        @click="handleAppriseList"
      >
        <template v-slot:suffix>
          <view style="color: #EB441F">{{ appriseRate }}</view>
        </template>
      </x-cell>
      <view v-if="tags && tags.length" :class="['_tags', { inline: commentType === 2 }]">
        <view v-for="(item, index) in tags" :key="index" class="_tag">{{ item.label }}</view>
      </view>
    </template>
    <view class="_list">
      <view v-for="item in list" :key="item.id" class="_apprise" @click="handleAppriseList">
        <view class="_user">
          <view class="_avator">
            <x-image :src="item.accountHeadImg" />
          </view>
          <view class="_name">{{ item.accountNickname || '匿名用户' }}</view>
        </view>
        <view class="_content">
          <view v-if="item.commentContent" class="_text">
            {{ item.commentContent }}
          </view>
          <view class="_img_video_list">
            <view class="_img_video" v-if="item.videoPreview" @click.stop="handleVideo(item.videoUrl)">
              <view class="_play">
                <x-image src="/assets/images/paly.png"/>
              </view>
              <x-image :src="formatOss(item.videoPreview)" />
            </view>
            <view class="_img_video" v-for="(src, index) in item.imgUrls" :key="index" @click.stop="() => handleClickImg(item.imgUrls, src)">
              <x-image :src="formatOss(src)" />
            </view>
          </view>
          <view class="sku">{{item.skuName}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';
import XCell from '@/components/x-cell';
import PAppriseRollingTags from '../p-apprise-rolling-tags';

export default {
  name: 'PApprise',
  components: {
    XImage,
    XCell,
    XIcon,
    PAppriseRollingTags
  },
  props: {
    productId: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: [Array, null],
      default: () => []
    },
    newLabel: {
      type: [Array, null],
      default: () => []
    },
    min: {
      type: Number,
      default: 1
    },
    isNewTemplate: {
      type: Boolean,
      default: false
    },
    isTemplate3: {
      type: Boolean,
      default: false
    },
    commentType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: null,
      appriseRate: null
    };
  },
  computed: {
    tags() {
      if (this.newLabel && this.newLabel.length) {
        return this.newLabel;
      } else if (this.label && this.label.length) {
        return this.label.map(item => {
          return {
            label: item,
            userCount: 0
          };
        });
      }
      return [];
    }
  },
  created() {
    setTimeout(() => {
      if (this.commentType === 2) {
        this.getCustomCommentList();
      } else {
        this.getCommentList();
      }
    }, 1000);
  },
  methods: {
    //  获取用户评价
    getCommentList() {
      this.$http({
        url: '/product/comment/product/list',
        method: 'get',
        report: false,
        data: {
          productId: this.productId,
          pageSize: this.min + 1
        }
      }).then(res => {
        const list = res.data || [];
        if (list.length >= this.min) {
          list.forEach((item) => {
            if (item.imgUrls) {
              item.imgUrls = item.imgUrls.split(',');
            }
            if (item.videoUrl) {
              item.videoUrl = item.videoUrl.split(',');
            }
          });
          this.list = list.slice(0, 2);
          // 获取评价好评率
          this.getAppriseRate();
        }
      });
    },
    //  获取自定义用户评价
    getCustomCommentList() {
      this.$http({
        url: '/product/qa/app/comment/list',
        method: 'get',
        report: false,
        data: {
          productId: this.productId,
          pageSize: 2,
          type: 0
        }
      }).then(res => {
        this.list = res.data?.map(item => {
          return {
            accountHeadImg: item.headImg,
            accountNickname: item.nickName,
            commentContent: item.questionContent,
            imgUrls: item.imgUrls?.split(',') || [],
            skuName: item.skuName
          };
        }) || [];
        // 获取评价好评率
        this.getAppriseRate();
      });
    },
    //  获取用户评价的好评率
    getAppriseRate() {
      const params = {
        productId: this.productId
      };
      this.$http({
        url: '/product/comment/praise/rate',
        method: 'get',
        error: false,
        report: false,
        data: params
      }).then(res => {
        this.appriseRate = `好评度${res.data || 100}%`;
      });
    },
    handleAppriseList() {
      if (this.commentType === 2) {
        uni.navigateTo({
          url: `/packages/serve/apprise/apprise-list-custom?productId=${this.productId}`
        });
      } else {
        uni.navigateTo({
          url: `/packages/serve/apprise/apprise-list?productId=${this.productId}`
        });
      }
    },
    // 视频播放跳转
    handleVideo(fileUrl) {
      uni.navigateTo({
        url: `/packages/video/preview?fileUrl=${fileUrl}`
      });
    },
    //  图片预览
    handleClickImg(urls, current) {
      uni.previewImage({
        urls,
        current
      });
    },
    formatOss(src) {
      return this.$tools.formatOss(src, 200);
    }
  }
};
</script>

<style lang="scss" scoped>
.p-apprise{
  margin-top: 16px;
  background-color: #fff;

  &.is-new-template,
  &.is-template-3,
  {
    margin-left: var(--padding);
    margin-right: var(--padding);
    background: #FFF5EF;
    border-radius: 20px;
    padding: 20px;
  }
  &.is-template-3{
    background: #F8F8F8;
    ._tags{
      border-bottom: none;
      padding-left: 0;
      ._tag{ background-color: #F8E7E8; color: #E1693D; }
    }
  }
  ._tags{
    display: flex; flex-wrap: wrap; border-bottom: 2px solid $uni-bg-color-grey; padding-left: 20px;
    &.inline{
      height: 2em;
      overflow: hidden;
    }
    ._tag{ background-color: #FFE2DA; color: #111; margin: 0 23px 23px 0; line-height: 1; padding: 12px 30px; border-radius: 30px; font-size: 26px;}
  }
  ._apprise{
    padding: 16px 24px;
    ._user{
      display: flex;
      align-items: center;
      ._avator{
        width: 56px;
        height: 56px;
        border-radius: 50%;
        overflow: hidden;
        background: cdn('/images/avatar-normal.png') no-repeat; background-size: cover;
      }
      ._name{
        margin-left: 12px;
        font-size: 26px;
        font-weight: 600;
        color: #323233;
      }
    }
    ._content{
      padding: 10px 10px 0 10px;
      ._text{
        font-size: 30px;
        color: #333;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      ._img_video_list{
        display: flex; flex-wrap: wrap;
        ._img_video{
          width: 120px;
          height: 120px;
          margin-right: 16px;
          margin-top: 16px;
          position: relative;
          ._play{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 60px;
            height: 60px;
          }
        }
      }
      .sku{
        font-size: 28px;
        color: #999999;
        margin-top: 10px;
      }
    }
  }

  .title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #CC4900;
    font-size: 38px;
    font-weight: 500;
    margin: 10px 0 40px;
  }

  &.is-template-3{
    .title{
      padding: 15px 0 25px;
      margin: 0 0 15px;
      font-size: 34px;
      color: #323232;
      border-bottom: 2px solid $uni-bg-color-grey;

      .good-rate{
        display: flex;
        align-items: center;
        color: #EB441F;
        font-size: 28px;
      }
    }
  }
}

</style>
